<template>
  <uni-popup ref="popup" type="bottom">
    <view class="popup">
      <view class="popup-header">
        其他登录方式
        <uni-icons class="close" type="closeempty" size="30" @click="closePop"></uni-icons>
      </view>
      <view class="popup-login-type-c">
        <!-- <view class="image_c">
                    <image src="@/static/my/login-by-wechat.png" @click="onLoginByWechat" />
                </view> -->
        <view class="image_c">
          <image src="@/static/my/login-by-mobile.png" @click="loginByMobile" />
        </view>
      </view>
      <view class="popup_check">
        <checkbox-group @change="isChecked = !isChecked">
          <label>
            <checkbox
              :checked="isChecked"
              size="mini"
              color="#4a4a4a"
              style="transform: scale(0.8)"
            />
          </label>
        </checkbox-group>
        <view class="popup_check_text">
          <text>阅读并同意</text>
          <text
            class="popup_check_text_c"
            @click="
              navigateTo(
                `/pages-users/common-agreement/index?url=blapp/v1/about/user&title=咪婴伴侣用户协议`,
              )
            "
          >
            《咪婴伴侣用户协议》
          </text>
          <text
            class="popup_check_text_c"
            @click="
              navigateTo(
                `/pages-users/common-agreement/index?url=blapp/v1/about/login_policy&title=隐私协议`,
              )
            "
          >
            《隐私协议》
          </text>
          <text
            class="popup_check_text_c"
            @click="
              navigateTo(
                `/pages-users/common-agreement/index?url=blapp/v1/about/payment&title=支付协议`,
              )
            "
          >
            《支付协议》
          </text>
        </view>
      </view>
    </view>
  </uni-popup>

  <cover-view v-if="showHint" class="loginBOx" @click="showHint = false">
    <cover-image
      class="coverImage"
      :style="{
        transform: `translate(0, -${props.top || 50}%)`,
      }"
      src="@/static/images/rectangle.png"
    >
    </cover-image>
    <cover-view
      class="hint"
      :style="{
        transform: `translate(0, -${props.top || 50}%)`,
      }"
    >
      <cover-view class="row1">欢迎来到咪婴伴侣</cover-view>
      <cover-view class="row2">体验新生活</cover-view>
      <cover-view class="btn1" @click="showLogin">
        <cover-view class="btncls" @click="showLogin">立即登录</cover-view>
      </cover-view>
      <cover-view class="btn2" @click="showHint = false">
        <cover-view class="btncls" @click="showHint = false">再想想</cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { showToast, navigateTo, showLoading, hideLoading, showModal, redirectTo } from '@/utils'
import { loginByOauth, loginByWechat } from './utils'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { useMemberStore, useSystemStore } from '@/stores'

/**
 * @description 调用 <h-login /> 组件的open方法，即可弹起一键登录，内部已经处理完毕用户信息保存
 * @exports open {Function} return {Promise} Promise 登录返回对象
 * @exports closePop {Function} 关闭其他登录弹窗 V3> login.value.closePop()
 */

const showHint = ref(false)
const popup = ref(null)
const isChecked = ref(false)
const props = defineProps({
  top: String,
})
// #ifdef APP-PLUS
// const jpushModule = uni.requireNativePlugin('JG-JPush')
// #endif
defineExpose({
  close,
  open,
  closePop,
})
var registrationID = ref('')

onLoad(() => {
  // #ifdef APP
  uni.getPushClientId({
    success: (res) => {
      uni.setStorageSync('registerID', res.cid)
      registrationID.value = res.cid
      console.log(res.cid)
    },
    fail(err) {
      console.log(err)
    },
  })
  // #endif
})
onReady(() => {
  // #ifdef APP-PLUS || APP-IOS || APP-ANDROID
  uni.preLogin({
    provider: 'univerify',
  })
  // #endif
})
// ----------------------------------------------
const currentPage = ref('')
onShow(() => {
  const userStore = useMemberStore()
  if (!userStore.token) {
    let pages = getCurrentPages() // 获取当前页面栈
    currentPage.value = pages[pages.length - 1].route // 上一页为栈顶第二个元素
    // console.log(currentPage.value)
  }

  // ----------------------------------------------
  // #ifdef APP
  // let registerID = uni.getStorageSync('registerID')
  // if (registerID) {
  //   registrationID.value = registerID
  // } else {
  //   uni.$on('connectStatusChange', (connectStatus) => {
  //     var connectStr = ''
  //     if (connectStatus == true) {
  //       connectStr = '已连接'
  //       getRegistrationID()
  //     } else {
  //       connectStr = '未连接'
  //       uni.showModal({
  //           content: '请授权消息通知'
  //       })
  //     }
  //   })
  // }
  // ----------------------------------------------
  // #endif
})
// ----------------------------------------------
// function getRegistrationID() {
//   jpushModule.getRegistrationID((result) => {
//     let registerID = result.registerID
//     registrationID.value = registerID
//     if (result.registerID != '') {
//       uni.setStorageSync('registerID', registerID)
//     }
//   })
// }

/**
 * @description 一键登录
 * @export open 弹起一键登录 login.open()
 * @param {Boolean} isShow 是否显示登录提示
 * @return {Promise} Promise 登录返回对象
 * @example <h-login ref="login"></h-login>
 */
function open(isShow = false) {
  showLogin()
  // if (isShow) {
  //   showHint.value = true
  // } else {
  //   showLogin()
  // }
}
function close(isShow = false) {
  showHint.value = false
}

/**
 * @description 一键登录
 */
function showLogin() {
  showHint.value = false
  loginByOauth({
    registration_id: registrationID.value || '',
    // 登录成功
    _success(res, code) {
      emit('updateInfo')
    },
    // 登录失败
    _fail(err) {
      // openPop()
      if (currentPage.value != 'pages-users/login-page/login') {
        navigateTo('/pages-users/login-page/login', 0)
      }
    },
    // 用户点击其他登录方式
    _onOtherLogin() {
      console.log(currentPage.value)
      // openPop()
      if (currentPage.value != 'pages-users/login-page/login') {
        navigateTo('/pages-users/login-page/login', 0)
      }
    },
  })
}

const emit = defineEmits(['updateInfo'])

/**
 * @description 手机号登录
 */
function loginByMobile() {
  if (!isChecked.value) {
    showToast('请先阅读并同意协议')
    return
  }
  closePop()
  isChecked.value = false
  if (currentPage.value != 'pages-users/login-page/login') {
    navigateTo('/pages-users/login-page/login', 0)
  }
}

/**
 * @description 微信登录
 */
function onLoginByWechat() {
  if (!isChecked.value) {
    showToast('请先阅读并同意协议')
    return
  }
  showLoading('登录中...')
  loginByWechat({
    registration_id: registrationID.value,
    _success() {
      closePop()
      isChecked.value = false
      emit('updateInfo')
      hideLoading()
    },
    _fail() {
      hideLoading()
    },
  })
}
/**
 * open popup
 */
function openPop() {
  nextTick(() => {
    popup.value.open()
  })
}

/**
 * close popup
 */
function closePop() {
  const userStore = useMemberStore()
  if (userStore.token) {
    popup.value.close()
  } else {
    // showToast('请先登录！')
  }
}
</script>

<style lang="scss" scoped>
::v-deep .vue-ref {
  padding-bottom: 0 !important;
}

.btncls {
  position: absolute;
  left: 0;
  top: 12rpx;
  height: 33rpx;
  right: 0;
  margin: auto;
}

.loginBOx {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999;
  background: rgba(0, 0, 0, 0);
  height: 100vh;
}

.coverImage {
  position: absolute;
  top: 50vh;
  transform: translate(0, -60%);
  right: 0;
  left: 0;
  width: 500rpx;
  height: 426rpx;
  margin: auto;
  border-radius: 44rpx 44rpx 44rpx 44rpx;
}

.hint {
  position: absolute;
  top: 50vh;
  transform: translate(0, -60%);
  right: 0;
  left: 0;
  width: 500rpx;
  height: 426rpx;
  margin: auto;
  border-radius: 44rpx 44rpx 44rpx 44rpx;
  opacity: 1;
  border: 0rpx solid;
  padding-top: 98rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .row1 {
    font-size: 44rpx;
    font-family: loginhint;
    font-weight: 400;
    color: #2c63f5;
  }

  .row2 {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #838383;
    margin-top: 23rpx;
  }

  .btn1 {
    width: 402rpx;
    background: #2557f5;
    border-radius: 88rpx 88rpx 88rpx 88rpx;
    opacity: 1;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    color: #ffffff;
    height: 66rpx;
    line-height: 66rpx;
    margin-top: 48rpx;
    position: relative;
  }

  .btn2 {
    width: 402rpx;
    background: #bad3fb;
    border-radius: 88rpx 88rpx 88rpx 88rpx;
    opacity: 1;
    text-align: center;
    font-size: 30rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    color: #ffffff;
    margin-top: 22rpx;
    position: relative;
  }
}

.popup {
  width: 750rpx;
  height: 398rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  font-family: PingFang SC, PingFang SC;

  .popup-header {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 28rpx;
    font-weight: 500;
    color: #000000;

    .close {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .popup-login-type-c {
    margin-top: 30rpx;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    padding: 0 120rpx;

    .image_c {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
    }
  }

  .popup_check {
    width: 100%;
    bottom: 60rpx;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 79rpx;

    ::v-deep .uni-checkbox-input {
      border-radius: 50%;
    }

    .popup_check_text {
      display: flex;
      font-size: 20rpx;

      .popup_check_text_c {
        color: #0074fc;
      }
    }
  }
}
</style>
